<template>
  <div class="tab">
    <el-table ref="tableRef" row-key="date" @selection-change="handleSelectionChange" :data="filterTableData"
              style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column
          prop="createDate"
          label="注册时间"
          width="180"
          column-key="date"
      />
      <el-table-column label="头像" width="180">
        <template #default="scope">
          <el-avatar shape="square" :src="url+scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="账号名"/>
      <el-table-column prop="account" label="账号"/>
      <el-table-column prop="email" label="邮箱"/>
      <el-table-column
          prop="isOnline"
          label="是否在线"
          width="100"
          :filters="[{ text: '在线', value: '在线' },{ text: '不在线', value: '不在线' },]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag
              :type="scope.row.isOnline === '在线' ? 'success' : 'danger'"
              disable-transitions
          >{{ scope.row.isOnline }}
          </el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="用户状态"
          width="100"
          :filters="[{ text: '无效', value: 0 },{ text: '有效', value: 1 },]"
          :filter-method="filterStatus"
          filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag
              :type="scope.row.status === 1? 'success' : 'danger'"
              disable-transitions
          >{{ scope.row.status === 1 ? '有效' : '无效' }}
          </el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="Operations">
        <template #header>
          <el-input v-model="search" size="small" placeholder="名字搜索"/>
        </template>

        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">下线</el-button>
          <el-button
              v-if="scope.row.status === 1"
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">
            停用
          </el-button>

          <el-button
              v-else
              size="small"
              type="success"
              @click="handleDelete(scope.$index, scope.row)">
            启用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="outside">
      <el-pagination
          style="width: 100%"
          v-model:current-page="pageS.pageNumber"
          v-model:page-size="pageS.pageSize"
          :page-sizes="[1, 5, 10, 20]"
          layout="sizes, prev, pager, next"
          v-model:total="pageS.pageCount"
          hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />

      <div class="out">
        <el-button size="small" @click="handleEditAll">
          一键下线
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleEditDeleteAll">
          一键停用
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, Ref, ref} from 'vue'
import {ElTable} from 'element-plus'
import {TableColumnCtx} from "element-plus/es/components/table/src/table-column/defaults";
import {error, success} from "../../../utils/messageUtil";
import {deleteUser, forcedExit, getAll} from "../../../service/EndApi";

const url = ref(import.meta.env.VITE_APP_BASE_API + "/common/file/loadFileId?fileId=")

// 多选选中的数据
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

interface Page {
  pageNumber: number,
  pageSize: number,
  pageCount: number
}

const pageS = ref<Page>({
  pageCount: 0,
  pageNumber: 1,
  pageSize: 5
})

const getData = () => {
  getAll({
    pageNumber: pageS.value.pageNumber,
    pageSize: pageS.value.pageSize
  }).then(d => {
    if (d.data.code === '200') {
      pageS.value.pageCount = d.data.date.count
      tableData.value = d.data.date.content
    } else {
      error("网络错误")
    }
  })
}

onMounted(() => {
  getData()
})

const handleSizeChange = (val: number) => {
  pageS.value.pageSize = val
  getData()
}
const handleCurrentChange = (val: number) => {
  pageS.value.pageNumber = val
  getData()
}

interface User {
  id: string,
  name: string
  account: string
  email: string
  avatar: string
  isOnline: string
  createDate: string
  status: number
}

const search = ref('')
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            (data as User).name.toLowerCase().includes(search.value.toLowerCase())
    )
)

const tableRef = ref<InstanceType<typeof ElTable>>()

const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  tableRef.value!.clearFilter()
}

const filterTag = (value: string, row: User) => {
  return row.isOnline === value
}

const filterStatus = (value: number, row: User) => {
  return row.status === value
}


const handleEdit = (index: number, row: User) => {
  let userIds:string[] = [];
  userIds.push(row.id);
  forcedExit({
    userIds
  }).then(d=>{
    if(d.data.code === '200'){
      success('成功')
      row.isOnline = '不在线';
    }
  })

}
const handleDelete = (index: number, row: User) => {
  let userIds:string[] = [];
  userIds.push(row.id);
  deleteUser({
    userIds
  }).then(d=>{
    if(d.data.code === '200'){
      success('成功')
      row.status = row.status === 0 ? 1:0;
    }
  })

}

const handleEditAll = ()=>{
  let userIds:string[] = multipleSelection.value.map(a=>a.id);
  forcedExit({
    userIds
  }).then(d=>{
    if(d.data.code === '200'){
      success('成功')
      multipleSelection.value.forEach(u=>{
        if(userIds.indexOf(u.id) > -1){
          u.isOnline = '不在线'
        }
      })
      tableRef.value!.clearSelection()
    }
  })
}

const handleEditDeleteAll = ()=>{
  let userIds:string[] = multipleSelection.value.map(a=>a.id);
  deleteUser({
    userIds
  }).then(d=>{
    if(d.data.code === '200'){
      success('成功')
      multipleSelection.value.forEach(u=>{
        if(userIds.indexOf(u.id) > -1){
          u.status = u.status === 0 ? 1:0;
        }
      })
      tableRef.value!.clearSelection()
    }
  })
}


const tableData = ref([])
</script>

<style scoped>
.tab {
  display: flex;
  flex-wrap: wrap;
}

.outside{
  width: 100%;
  display: flex;
  margin-top: 5px;
}

.out{
  display: flex;

}
</style>
